

<template>
<div>
  <div class="goodsImg-mokuai">
    <!-- 筛选查找 -->
     <div class="goodsImg-index">
       <div  class="goodsImg-index-top">
    <div class="goodsImg-name">
      <div class="goodsImg-name-font">
        <i class="el-icon-search"></i>
        筛选查询
      </div> 
      <div class="goodsImg-name-right">
          <el-button @click="onSubmit">查询结果</el-button>
      </div>
        <div class="goodsImg-name-right" @click="packUp">
        <i class="el-icon-arrow-up"></i>
        收起筛选
      </div> 
    </div>
    <div  class="goodsImg-content">   
<!-- 筛选条件 -->
 <div class="goodsImg-button-select-2"  v-if="showPrise">
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="活动名称:">
            <el-input v-model="formInline.goodsImgName" placeholder="活动名称" class="select-width-1" clearable></el-input>
          </el-form-item>
            <el-form-item label="启用状态:">
            <el-select v-model="formInline.status" placeholder="全部" clearable>
              <el-option label="启用" :value="1"></el-option>
              <el-option label="停用" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
 </div>

 

    </div>
     </div>
   </div>

    <!-- 数据模块 -->
  <div class="goodsImg-index">
      <div  class="goodsImg-index-top">
    <div class="goodsImg-name">
      <div class="goodsImg-name-font">
        <i class="el-icon-s-unfold"></i>
        数据列表
      </div> 
       <div class="goodsImg-index-select">
         <div class="good-left goodsImg-index-select-button"><el-button @click="onSubmitImg" size="small">添加</el-button></div>
         <div class="good-left">
             <!-- <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
        
            <el-form-item label="">
            <el-select v-model="listLine.sort" placeholder="排序方式" class="select-width-2">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
  
        </el-form> -->
         </div>
          
        
      </div>
    </div>
    <div  class="goodsImg-content">   
<!-- 数据列表 -->
 <div>
<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      align="center">
    </el-table-column>
    <el-table-column
    
      label="编号"
      width="90"
      align="center">
      <template slot-scope="scope">{{ scope.row.code}}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="公司名称"
      width="140"
      align="center">
    </el-table-column>
      <el-table-column
      prop="description"
      label="配送描述"
      align="center">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="添加时间"
      width="160"
      align="center">
    </el-table-column>
   
     <el-table-column
      prop="sort"
      label="是否启用"
      width="100"
      align="center">
       <template slot-scope="scope"><el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0"></el-switch></template>
    </el-table-column>
   
  <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="handleClickTwo(scope.$index, scope.row)" type="text" size="small">设置打印模板</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
  </el-table>
 </div>
 <!-- 页脚 -->
<div class="goodsImg-paging">
  <!-- 批量操作 -->
    <div class="goodsImg-paging-leftlayout">
      <div class="opertation-block">
        <!-- 全选需要设置方法目前只能操作0，1数据 -->
           <el-button @click="toggleSelection(tableData)" size="small">全选</el-button>
      </div>
      <div class="opertation-block">
        <el-form :inline="false" :model="operation" class="demo-form-inline" size="small">
          <el-form-item label="">
            <el-select v-model="operation.opertationType" placeholder="批量操作" class="select-width-2">
              <el-option label="设为启用" value="1"></el-option>
              <el-option label="设为停用" value="0"></el-option>
              <el-option label="删除" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="opertation-block" >
    <el-button size="small" @click="batchOperate">确定</el-button>
      </div>
    </div>
    <!-- 分页 -->
<div class="goodsImg-paging-layout">
<div class="block">
    <span class="demonstration"></span>
  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>

  </div>
 </div>
</div>
 

    </div>
     </div>
   </div>
</div>
<!-- 弹出框 -->
<div>
      <el-dialog title="添加物流公司" :visible.sync="FormVisible" style="width: 80%">
        <el-form :model="form" label-width="90px">
          <el-form-item label="*公司名称:">
            <el-input v-model="form.name" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="*配送描述:">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.type" style="width: 300px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="FormVisible= false">取 消</el-button>
          <el-button type="primary" @click="addCommit">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 弹出框2 -->
<div>
      <el-dialog title="编辑物流公司" :visible.sync="FormVisibleA" style="width: 80%">
        <el-form :model="formA" label-width="90px">
          <el-form-item label="*公司名称:">
            <el-input v-model="formA.name" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="*配送描述:">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="formA.description" style="width: 300px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="FormVisibleA= false">取 消</el-button>
          <el-button type="primary" @click="redactCommit(formA)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<style>
/* 自定义 */

.select-width-1{
  width: 200px;
}
.select-width-2{
  width: 100px;
}
.good-left{
  float:left;
}
.goodsImg-mokuai{
  height: 1000px;
  background-color: rgb(249, 249, 249);

}
.goodsImg-index{
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);

}
.goodsImg-index-top{
 margin-top: 30px;
}
.goodsImg-name{
  width: 100%;
  height:50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);

}
.goodsImg-name-font{
   height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
   font-size: 14px;
}
.goodsImg-name-right{
   height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsImg-index-select{
  width: 350px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;

}
.goodsImg-index-select-button{
margin-right: 20px;
}
.goodsImg-content{
  width: 100%;
}
.goodsImg-button-select-2{
  height: 50px;
 padding-top:10px;
 padding-left: 20px;

}

.opertation-block{
  display: inline-block;
  margin-left: 3px;
}
.goodsImg-paging{

  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsImg-paging-leftlayout{
  float:left;
   margin-top: 7px;
}
 .goodsImg-paging-layout{
  float: right;
  margin-top: 7px;
 }
</style>
    
<script>

import CompanyApi from '@/api/settings/logCompany'
   export default {
    data() {
       
      return {
        // 弹出框
        FormVisible:false,
          form: {
        name: "",
        type: "",
       
      },
        // 弹出框2
        FormVisibleA:false,
          formA: {
      
      },
        // 隐藏
       showPrise:true,
        // 筛选
         formInline: {
           goodsImgName:"",
           status:"",
         
      },
      // listLine: {
      //  row:"",
      //  sort:"",

      // },
      operation:{
      opertationType:"",
      },
        // 列表数据
         tableData: [],
         
        multipleSelection: [],
       // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,
      }
    },
      methods: {

        batchOperate(){

if(this.operation.opertationType==''){
  this.$message("请选择需要的操作");
}
          if(this.operation.opertationType=='0'){
this.multipleSelection.forEach(v=>{

let data={
  id:v,
  state:0,
}

  this.updateBatch(data);
});

setTimeout(()=>{

this.indata();
},2000)


          }


          if(this.operation.opertationType=='1'){
this.multipleSelection.forEach(v=>{

let data={
  id:v,
  state:1,
}

  this.updateBatch(data);
});

setTimeout(()=>{

this.indata();
},2000)
  
}
           if(this.operation.opertationType=='2'){
           
           this.multipleSelection.forEach(v=>{

this.deletBatch(v);
           });

     setTimeout(()=>{

this.indata();
},2000)
          }
        },
        // 数据列表
          toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {

        this.multipleSelection = [];

        val.forEach(v=>{

          this.multipleSelection[this.multipleSelection.length]=v.id;
        })
      },
         handleClick(index,row) {
       this.FormVisibleA = true;
       this.seletByid(row.id);
         },
         handleClickTwo(index,row) {
          
         },
         deleteHandle(index,row){
           this.deleteData(row.id);
         },
        // 分页
      handleSizeChange(val) {
      this.pageSize=val;
      this.indata();
      },
      handleCurrentChange(val) {
      this.currentPage1=val;
      this.indata();
      },
         onSubmit() {
      this.indata();
    },
    onSubmitImg() {
    
      this.FormVisible = true;
    
    },
    // 点击显示和隐藏
    packUp:function(){
     this.showPrise = !this.showPrise;
     },
     addCommit(){

       let data={
         name:this.form.name,
         description:this.form.type,
       };

       this.addData(data);
       this.form=[];
       this.FormVisible=false;
     },

     redactCommit(form){
 let data={
         id:form.id,
         name:form.name,
         description:form.description,
       };

       this.updateData(data);
     },
     

     indata(){
       let dto={
         pageNum:this.currentPage1,
         pageSize:this.pageSize,
         name:this.formInline.goodsImgName,
         state:this.formInline.status,
       }
       CompanyApi.findPageInfo(dto.pageNum,dto.pageSize,dto.name,dto.state).then(response=>{

         console.log(response);
         this.tableData=response.data.data.list;
         this.total=response.data.data.total;

       })
     },

addData(data){

  CompanyApi.add(data).then(response=>{

    console.log(response);
    this.$message(response.data.message);

    setTimeout(()=>{
  this.indata();

    },1000);
  
  })
},

seletByid(id){

  CompanyApi.getById(id).then(response=>{
    console.log(response);
     this.formA={},
    this.formA=response.data.data;
  })
},
updateData(logisticsCompany){
  CompanyApi.updateList(logisticsCompany).then(response=>{

    console.log(response);
    this.$router.go(0);
  })
},

deleteData(id){
  CompanyApi.deleyeById(id).then(response=>{

    console.log(response);
    this.$message(response.data.message);
    setTimeout(()=>{
this.indata();

    },1000)
    
  })
},

deletBatch(id){
CompanyApi.deleyeById(id).then(response=>{
 console.log(response);

})

},

updateBatch(logisticsCompany){

  CompanyApi.updateById(logisticsCompany).then(response=>{

    console.log(response);

  })
}

    },
    created(){

      this.indata();
    }
  }
  
</script>